/* CSS Document */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */
body {
	color: #000;
	font: 14px/140% Arial, Helvetica, sans-serif;
	margin: 0;
	padding:0;
	background-color:#810089;
	background-image:-moz-radial-gradient(center -110px 45deg, circle farthest-corner, #e944f4 150px, #810089 500px);
	background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 600, from(#e944f4), to(#810089));
	background-repeat:no-repeat;
}
a {
	text-decoration: none;
	color: #FFF;
}
img {
	border: none;
}
#pagewrap {
	width: 960px;
	margin: 0 auto;
	min-height:660px;
	position:relative;
}
header {
	margin:0;
	top:0;
	position:relative;
}
.logo {
	position:relative;
	-webkit-transform: rotate(5deg);
	-moz-transform: rotate(5deg);
	-webkit-transition: all 1s ease;
	-moz-transition: all 2s ease;
	opacity:0.9;
	left: 1px;
	top: -105px;
}

.logo img{ 
	-moz-box-shadow:0 0 15px #000;
	-webkit-box-shadow:0 0 15px #000;
	box-shadow:0 0 15px #000;
	opacity:0.5;


}
.logo a:hover img {
	-moz-box-shadow:0 0 5px #d1d6df;
	-webkit-box-shadow:0 0 5px #d1d6df;
	box-shadow:0 0 5px #d1d6df;
}


.logo:hover {
    -webkit-transform: rotate(-20deg); 
	-moz-transform: rotate(-20deg);
 	opacity:1;
	zoom:1;
}

.logo:focus {
    outline: none;
    -webkit-transform: rotate(0deg) scale(1.5);
	-moz-transform: rotate(0deg) scale(1.5);
    z-index: 9999;
 	opacity:1;
	zoom:1.2;
}
header h1 {
	font-size: 36pt;
	color: #870E69;
	position:absolute;
	text-shadow:0 0 2px #000;
	font-variant: small-caps;
	top:15px;
	left:300px;
}
header h2 {
	color: #870E69;
	top: 110px;
	margin:0;
	position:absolute;
	left:230px;
	text-shadow:0 0 1px #000;
	letter-spacing: 3pt;
	font-size: 11pt;
	font-variant: small-caps;
}
header h2 span {
	font-style: italic;
	color: #FFF;
	text-shadow:0 0 5px #ccc;
	text-decoration: underline overline;
}
/*navigasi*/
nav {
	clear:both;
	position: fixed;
	bottom:10px;
	right: 10px;
}
nav ul {
	margin:0;
	text-shadow:0 0 2px #000;
	font-variant: small-caps;
}
nav li{
	list-style:none;
	height:39px;
	padding:2px;
	width:40px;
}
nav span{
	/* Container properties */
	width:0;
	right:38px;
	padding:0;
	position:absolute;
	overflow:hidden;

	/* Text properties */
	font-size:15px;
	font-weight:bold;
	letter-spacing:0.6px;
	white-space:nowrap;
	line-height:39px;

	/* CSS3 Transition: */
	-webkit-transition: 0.25s;

	/* Future proofing (these do not work yet): */
	-moz-transition: 0.25s;
	transition: 0.25s;
}

nav a{
	height:39px;
	width:38px;
	display:block;
	position:relative;
	background-image: url(../img/navigation.jpg);
	background-repeat: no-repeat;
}

/* General hover styles */

nav a:hover span{ width:auto; padding:0 20px;overflow:visible; }
nav a:hover{
	text-decoration:none;

	/* CSS outer glow with the box-shadow property */
	-moz-box-shadow:0 0 2px #000;
	-webkit-box-shadow:0 0 2px #000;
	box-shadow:0 0 2px #000;
}
/* Green Button */

nav .home {	background-position:0 0;}
nav .home:hover {	background-position:0 -39px;}
nav .home span{
	background-color: rgba(255,255,255,0.2);
	color:#fff;
	text-shadow:1px 1px 2px #000;
}

/* Blue Button */

nav .about { background-position:-38px 0;}
nav .about:hover { background-position:-38px -39px;}
nav .about span{
	background-color: rgba(255,255,255,0.2);
	color:#fff;
	text-shadow:1px 1px 2px #000;
}

/* Orange Button */

nav .services { background-position:-76px 0;}
nav .services:hover { background-position:-76px -39px;}
nav .services span{
	background-color: rgba(255,255,255,0.2);
	color:#fff;
	text-shadow:1px 1px 2px #000;
}

/* Yellow Button */

nav .portfolio { background-position:-114px 0;}
nav .portfolio:hover{ background-position:-114px -39px;}
nav .portfolio span{
	background-color: rgba(255,255,255,0.2);
	color:#fff;
	text-shadow:1px 1px 2px #000;
}

/* Purple Button */

nav .contact { background-position:-152px 0;}
nav .contact:hover { background-position:-152px -39px;}
nav .contact span{
	background-color: rgba(255,255,255,0.2);
	color:#fff;
	text-shadow:1px 1px 2px #000;
}
article {
	text-align:center;
}

.black_overlay{
	display: none;
	width: 900px;
	height:100%;
	min-height:600px;
	background-color: black;
	z-index:1001;
	-moz-opacity: 0.7;
	opacity:.70;
	filter: alpha(opacity=700);
	margin:auto;
	position:absolute;
	top:0;
	left:0;
	border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -moz-box-shadow: 0px 0px 10px #000; 
	-webkit-box-shadow: 0px 2px 10px #000; 
	box-shadow: 0px 0px 10px #000;
	overflow:auto;
	text-align:center;
	padding-bottom:10%;
}
 
.white_content {
	display: none;
	position:absolute;
	margin:0 auto;
	z-index:1002;
	top:20px;
	left:50px;;
	width:800px;
	border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -moz-box-shadow: 0px 0px 10px #000; 
	-webkit-box-shadow: 0px 2px 10px #000; 
	box-shadow: 0px 0px 10px #000;
	background-color:#FFF;
	height:auto;
}
.closer {
	margin:0;
	position:absolute;
	top:5px;
	right:10px;
}
#contact-form ul {
	margin: 0 0 15px 0;
	padding: 0;
	line-height: 14px;
}

#contact-form ul li {
	margin: 0 0 3px 15px;
	padding: 0;
}

#contact-form ol {
	margin: 0 0 15px 0;
	padding: 0;
	line-height: 14px;
}

#contact-form ol li {
	margin: 0 0 3px 30px;
	padding: 0;
}

#contact-form label.error { 
	display: block;
	color: red;                              
	font-size: 11px; 
	font-weight: bold;
}

/*-------------------------------------
FORM CORE
------------------------------------------*/

form#contact fieldset {
	padding: 10px 20px 20px 20px;
	margin: 0 auto;
	border: 0;
	background-color: #fff;
	width: 290px;
	text-align: left;
	border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -moz-box-shadow: 0px 0px 10px #d3d3d3; 
	-webkit-box-shadow: 0px 2px 10px #d3d3d3; 
	box-shadow: 0px 0px 10px #d3d3d3; 
}

form#contact input[type="text"], input[type="url"], 
input[type="email"], input[type="tel"], textarea {
	margin: 3px 0 0 0;
	padding: 6px; 
	width: 260px; 
	font-family: arial, sans-serif; 
	font-size: 12px; 
	border: 1px solid #ccc;
    background: -webkit-gradient(linear, left top, left 15, from(#FFFFFF), color-stop(4%, #f4f4f4), to(#FFFFFF));
    background: -moz-linear-gradient(top, #FFFFFF, #f4f4f4 1px, #FFFFFF 15px);
}

form#contact textarea {
	width: 275px; 
	height: 150px;
}

form#contact label {
	display: block;
	font-size: 13px;
	color: #666;
	margin-top: 10px;
	font-weight: bold;
}

form#contact label.error { 
	width: 270px;
	margin: 3px 0 0 0;
	display: block;
	color: #cf0101;                              
	font-size: 11px; 
	text-align: right;
}

form#contact .placeholder {
	color: #aaa;
}

form#contact .button {
	display: inline-block;
	margin: 15px 0 0 90px;
	padding: 5px 15px 5px 15px;
	background-color: #ff9e00;
	border: none;
	color: #fff;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-radius: 15px;
}

form#contact .button:hover {
	background-color: #fc8500;
	cursor: pointer;
}

form#contact .button:active {
	margin-top: 16px;
	background-color: #f08004;
	cursor: pointer;
}
#index_cards p {
	text-align:center;
}
.grey {

}
#aboutme {
	padding-right: 20px;
	padding-left: 20px;
}
#aboutme p {
	font-size: 14px;
	line-height: 30px;
	padding-top: 3px;
	padding-right: 5px;
	padding-bottom: 5px;	
}
#aboutme p:first-letter {
	float:left;
	font-size:20px;
	line-height: 35px;
	font-weight: bolder;
}
#aboutme .fotoku {
	float:right;
	margin-left:50px;
	margin-bottom:20px;
    -webkit-transform: rotate(20deg);
	-moz-transform: rotate(20deg);
    -moz-box-shadow: -1px -1px 10px #000; 
	-webkit-box-shadow: -1px -1px 10px #000; 
	box-shadow: -1px -1px 10px #000; 
	
}